<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小火箭</title>
  <link rel="stylesheet" href="./css/rocket.css">
</head>

<body>
  <div class="container">
    <div class="rocket">
      <img src="./image/rocket.png" alt="">
    </div>
  </div>
</body>
<script>
  function round(m, n) {
    return Math.ceil(Math.random() * (n - m + 1)) + m - 1
  }
  let num = 40
  for (let i = 0; i < num; i++) {
    const i = document.createElement('i')
    i.style.height = round(30, 100) + 'px'
    i.style.left = round(1, 99) + 'vw'
    i.style.animationDuration = round(5, 30) / 10 + 's'
    document.querySelector('.container').appendChild(i)
  }
</script>

</html>